﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link href="~/css/shop.css" type="text/css" rel="stylesheet" />
    <link href="~/css/Sellerber.css" type="text/css" rel="stylesheet" />
    <link href="~/css/bkg_ui.css" type="text/css" rel="stylesheet" />
    <link href="~/font/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    <script src="~/js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="~/js/jquery.cookie.js"></script>
    <script src="~/js/shopFrame.js" type="text/javascript"></script>
    <script src="~/js/Sellerber.js" type="text/javascript"></script>
    <script src="~/js/layer/layer.js" type="text/javascript"></script>
    <script src="~/js/laydate/laydate.js" type="text/javascript"></script>
    <script type="text/javascript" src="~/js/proTree.js"></script>
    <script src="~/layui/layui.js"></script>
    <script src="~/js/TimeFormat.js"></script>
    <!--[if lt IE 9]>
    <script src="~/js/html5shiv.js" type="text/javascript"></script>
    <script src="~/js/respond.min.js"></script>
    <script src="~/js/css3-mediaqueries.js"  type="text/javascript"></script>
      <![endif]-->
    <title>分类管理</title>
</head>
<body>
    <div class="margin" id="page_style">
        <div class="operation clearfix mb15 same_module">
            <ul class="choice_search">
                <li class="clearfix col-xs-3 col-lg-3 col-ms-3 "><label class="label_name">分类名称：</label><input name="" id="name" type="text" class="form-control col-xs-8 col-lg-8 col-ms-8" /></li>
                <li class="clearfix col-xs-5 col-lg-5 col-ms-5 ">
                    <label class="label_name ">添加时间：</label>
                    <input class="laydate-icon col-xs-4 col-lg-3 form-control Select_Date" id="start" />
                    <span style=" float:left; padding:0px 10px; line-height:32px;">至</span>
                    <input class="laydate-icon col-xs-4 col-lg-3 form-control Select_Date" id="end" />
                    <button class="btn button_btn bg-deep-blue " onclick="TableReload()" type="button"><i class="fa  fa-search"></i>&nbsp;搜索</button>
                </li>
            </ul>
        </div>
        <!--列表展示-->
        <div class="h_products_list clearfix" id="Sellerber">
            <div class="Sellerber_left menu" id="menuBar">
                <div class="show_btn" id="rightArrow"><span></span></div>
                <div class="side_title"><a title="隐藏" class="close_btn"><span></span></a></div>
                <div class="menu_style" id="menu_style">
                    <div class="list_content">
                        <div class="side_list">
                            <div class="column_title"><h4 class="lighter smaller">分类列表</h4></div>
                            <div class="st_tree_style tree">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="list_Exhibition list_show padding15">
                <div class="operation clearfix mb15 searchs_style">
                    <button class="btn button_btn btn-danger" type="button" onclick=""><i class="fa fa-trash-o"></i>&nbsp;删除</button>
                    <span class="submenu">                        
                        <a href="Add_Class" name="" class="btn button_btn bg-deep-blue" title="添加分类"><i class="fa  fa-edit"></i>&nbsp;添加分类</a>
                    </span>
                    <div class="search  clearfix">
                        <label class="label_name">商品搜索：</label><input name="" type="text" class="form-control col-xs-5" /><button class="btn button_btn bg-deep-blue " onclick="" type="button"><i class="fa  fa-search"></i>&nbsp;搜索</button>
                        <span>数量：3433件</span>
                    </div>
                </div>
                <div class="datalist_show">
                    <div class="datatable_height confirm">
                        <table class="table table_list table_striped table-bordered" id="sample-table" lay-filter="demo">
                        </table>
                        <script type="text/html" id="barDemo">
                            <a title="编辑" href="javascript:;" lay-event="edit" class="btn btn-xs btn-info">编辑</a>
                            <a title="删除" href="javascript:;" lay-event="del" class="btn btn-xs btn-delete">删除</a>
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">

     layui.use(['table', 'util'], function () {
         //用table就要定义
         var table = layui.table;
         //用form就要定义
         var form = layui.form;

         //表格加载
         table.render({
             elem: '#sample-table'
             , height: 500
             , url: '/Commodity/GetClasses' //数据接口
             , page: true //开启分页
             , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
             , cols: [[ //表头
                 { field: 'Id', title: '分类Id', sort: true,align:'center' }
                 , { field: 'Name', title: '分类名称', sort: true,align:'center'}
                 , { field: 'ParentId', title: '父分类ID ',align:'center' }
                 , { field: 'CategoryLevel', title: '分类层级',align:'center'}
                 , { field: 'ModifiedTime', title: '最后修改时间', width: 120, sort: true,align:'center', templet: '<div>{{ Format(d.ModifiedTime,"yyyy-MM-dd hh:mm:ss")}}</div>' }
                 , { title: '操作', fixed: 'right', width: 200, align: 'center', toolbar: '#barDemo' }
             ]]
         });

         //监听工具条
    table.on('tool(demo)', function (obj) {
        var data = obj.data;
        if (obj.event === 'detail') {
            //member_detail(data);
            //layer.msg('ID：'+ data.MId + ' 的查看操作');
        } else if (obj.event === 'del') {
            member_del(data);

        } else if (obj.event === 'edit') {
           location.href = "/Commodity/Add_Class?id=" + data.Id;
           
        }
    });
       function member_del(data){
	layer.confirm('确认要删除吗？',function(index){
        $.ajax({
            url: "/Commodity/DelClass?Id=" + data.Id,
            type: "post",
            success: function (data) {
                if (data.Success) {

                    layer.msg('已删除!', { icon: 1, time: 1000 });
                      layui.table.reload('sample-table', {//就会读取后台数据,重新加载；
                        where: {
                        }
                    });
                }
            }
        });
	});
}
     });

     //列表刷新
    function TableReload() {
        var table = layui.table;
        var name = $('#name').val();
        var addTime = $('#start').val();
        var end=$('#end').val();
        table.reload('sample-table', {
            where: {
                'name': name,
                'datetime': addTime,
                'end': end
            }
        });
    }
	//设置内页框架布局
$(function() {
	$("#Sellerber").frame({
		float : 'left',
		color_btn:'.skin_select',
		Sellerber_menu:'.list_content',
		page_content:'.list_show',//内容
		datalist:".datatable_height",//数据列表高度取值
		header:65,//顶部高度
		mwidth:200,//菜单栏宽度

	});
});


</script>
